<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>控制面板</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body{
        background-image: url('https://img1.baidu.com/it/u=2271182007,2735288855&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500');
        background-size: cover;
    }
    header {
        position: relative;
        width: 100%;
        line-height: 50px;
        text-align: center;
        background-color: darkkhaki;
    }
    #timer{
        color: white;
        position: absolute;
        right: 50px;
        top: 10%;
    }
    section{
        margin: 40px auto;
        width: 95%;
        border: 3px solid red;
        display: flex;
        height: 500px;
        justify-content: space-between;\
        flex-direction: column;
    }
    section .p_l{
        flex: 6;
        padding: 20px;
        flex-direction: row;
        overflow: scroll-x;
    }
    section .p_r{
        flex: 2;
        font-size: 20px;
    }
    .p_r span{
        color: red;
    }
    .item {
        background-color: yellow;
    }
    .p1{
        color: red;
        font-size: 30px;
    }
    .p2{
        color: black;
    }
</style>
<body>
    <header>
        <span>welcome back to domitory</span>
        <span id="timer">2022-02-23</span>
    </header>
    <div id="weather" style="text-align: center">

    </div>
    <section id="panel">
        <div class="p_l">
            <p class="item">
                <p class="p1">1</p>
                <p class="p2">xsssddsfdd</p>
            </p>
        </div>
        <div class="p_r">
            <p>使用刷脸的人有：<span id="g1">1</span>个</p>
            <p>使用app开门的人有：<span id="g2">1</span>个</p>
            <p>叫管理员开门的人有：<span id="g3">1</span>个</p>
        </div>
    </section>
</body>
<script>
    var div1=document.querySelector('.p_l')
    var g1=document.getElementById('g1')
    var g2=document.getElementById('g2')
    var g3=document.getElementById('g3')
    var c=document.getElementById('timer')
    var weather=document.getElementById('weather')
    function setTime(){
        var dat1=new Date()
        var year=dat1.getFullYear()
        var month=dat1.getMonth()
        var day=dat1.getDate()
        var min=dat1.getMinutes()
        var hour=dat1.getHours()
        var secs=dat1.getSeconds()
        return `${year}/${month}/${day} ${hour<10?'0'+hour:hour}:${min<10?'0'+min:min}:${secs<10?'0'+secs:secs}`
    }
    function renderlist(data){
        div1.innerHTML=''
        for(let i of data){
            div1.innerHTML+=`
            <p class="item">
                 <p class="p1">${i.id}</p>
                <p class="p2">${i.data}</p>
            </p>`
        }
    }
    function getWeather(data){
        data=data.lives[0]
        weather.innerHTML=`${data.city}--${data.weather}-${data.temperature}度 报道时间${data.reporttime}`
    }
    async function getData(){
        let res=await fetch('/apis/get_comm_info/')
        let data=await res.json()
        console.log(data)
        renderlist(data.data.infos)
        let t2=data.data.accessway
        g1.innerHTML=""+t2.useFace
        g2.innerHTML=""+t2.useapp
        g3.innerHTML=''+t2.usebtn
    }
    getData()
    c.innerHTML=setTime()
    let timer=null
    setInterval(()=>{
        if(timer!=null) return
        getData()
    },1000*5)
    let timer2=null
    setInterval(()=>{
        c.innerHTML=setTime()
    },1000)
</script>
<script src="https://query.asilu.com/weather/gaode?address=%E9%87%8D%E5%BA%86&now=3&callback=getWeather"></script>
</html>